<!--
 * @Author: early-autumn
 * @Date: 2020-05-20 14:47:37
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 16:00:42
-->
<template>
  <div class="user-matcher">
    <el-input
      v-model="keyword"
      placeholder="姓名/手机号"
      @focus="handleFocus(true)"
      @blur="handleFocus(false)"
      @keyup.enter.native="enterHandleMatcher"
    >
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="handleMatcher"
      >
        匹配患者
      </el-button>
    </el-input>
    <!--    <automatic-associations-->
    <!--      v-if="focus && keyword.trim()"-->
    <!--      :keyword="keyword.trim()"-->
    <!--    ></automatic-associations>-->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { SAVE_KEYWORD, SAVE_VISIBLE } from '@/store/modules/userMatcher'
import { phoneNumberRegexp } from '@/utils/regexps'

export default {
  name: 'UserMatcher',
  components: {
    // AutomaticAssociations: () => import('./AutomaticAssociations'),
  },
  data() {
    return {
      keyword: '',
      focus: false,
    }
  },
  computed: {
    ...mapState({}),
  },
  watch: {
    $route() {
      this.clearKeyword()
    },
  },
  methods: {
    clearKeyword() {
      this.keyword = ''
      this.$store.dispatch('userMatcher/initUserMatcher')
    },
    enterHandleMatcher() {
      this.handleMatcher()
    },
    handleMatcher() {
      if (!this.keyword) {
        return
      }
      // if (!phoneNumberRegexp.test(this.keyword)) {
      //   this.msgError('手机号格式不正确')
      //   return
      // }
      this.$store.commit({
        type: `userMatcher/${SAVE_KEYWORD}`,
        value: this.keyword.trim(),
      })
      this.$store.commit({
        type: `userMatcher/${SAVE_VISIBLE}`,
        value: true,
      })
    },
    handleFocus(value) {
      setTimeout(() => {
        this.focus = value
      }, 200)
    },
  },
}
</script>

<style lang="scss" scoped>
.user-matcher {
  width: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20000;
  transform: translate(-50%, -50%);
}
</style>
